<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- <cpn :cmovies='movies' :cmessage='message'></cpn> -->
			<!-- <cpn :cmovies='movies' ></cpn> -->
			<cpn :cmessage='message' :cmovies="movies"></cpn>
		</div>
		<template id="cpn">
			<div id="">
				<ul>
					<li v-for="item in cmovies">{{item}}</li>
				</ul>
				<h2>{{cmessage}}</h2>
			</div>
		</template>
		<script src="../js/vue.js"></script>
		<script>
			// 父传子：props
			const cpn={
				template:'#cpn',
				// props:['cmovies','cmessage'],
				
				props:{
					// 类型限制
					/* cmovies:Array,
					cmessage:String */
					
					//2.提供一些默认值以及必传值
					cmessage:{
						//类型
						type:String,
						//默认值
						default:"aaaaaaaaaaa",
						//必须传值
						required:true
					},
					//类型是对象或者数组时，默认值必须是一个函数
					cmovies:{
						type:Array,
						// default:[] //vue 2.5.17以下
						default(){
							return []
						}
					}
				},
				data(){
					return {};
				},
				
			};
			
			const app=new Vue({
				el:'#app',
				data:{
					message:'你好',
					movies:['海王','海贼王','海尔兄弟']
				},
				components:{
					cpn
				}
			})
		</script>
	</body>
</html>
